import React from 'react'
import { Button, Card, DatePicker, Form, Input, Select, Space, Table, Tag } from 'antd'

type StockCheckRecord = {
  key: React.Key
  index: number
  orderNo: string
  result: '草稿' | '有盈亏' | '无盈亏'
  warehouse: string
  type: '存货盘点' | '原料盘点'
  startTime: string
  endTime: string
  outStatus: '未出库' | '部分出库' | '已出库' | '-'
  inStatus: '未入库' | '部分入库' | '已入库' | '-'
  goods: string
  qty: number
  profitQty: number
  lossQty: number
  profitAmount: number
  lossAmount: number
  agent: string
  maker: string
  department: string
  makeTime: string
  reviewer: string
  reviewTime: string
}

const columns = [
  { title: '序号', dataIndex: 'index', width: 70, fixed: 'left' as const },
  { title: '盘点单号', dataIndex: 'orderNo', width: 140, fixed: 'left' as const },
  {
    title: '盘点结果',
    dataIndex: 'result',
    width: 110,
    fixed: 'left' as const,
    render: (text: StockCheckRecord['result']) => {
      const map: Record<StockCheckRecord['result'], string> = {
        草稿: 'default',
        有盈亏: 'orange',
        无盈亏: 'green'
      }
      return <Tag color={map[text]}>{text}</Tag>
    }
  },
  { title: '仓库名称', dataIndex: 'warehouse', width: 120 },
  { title: '盘点类型', dataIndex: 'type', width: 110 },
  { title: '盘点开始时间', dataIndex: 'startTime', width: 180 },
  { title: '盘点结束时间', dataIndex: 'endTime', width: 180 },
  { title: '出库状态', dataIndex: 'outStatus', width: 120 },
  { title: '入库状态', dataIndex: 'inStatus', width: 120 },
  { title: '盘点货品', dataIndex: 'goods', ellipsis: true },
  { title: '盘点数量', dataIndex: 'qty', width: 110 },
  { title: '盘盈数量', dataIndex: 'profitQty', width: 110 },
  { title: '盘亏数量', dataIndex: 'lossQty', width: 110 },
  { title: '盘盈金额', dataIndex: 'profitAmount', width: 120 },
  { title: '盘亏金额', dataIndex: 'lossAmount', width: 120 },
  { title: '经办人', dataIndex: 'agent', width: 100 },
  { title: '制单人', dataIndex: 'maker', width: 100 },
  { title: '所在部门', dataIndex: 'department', width: 120 },
  { title: '制单时间', dataIndex: 'makeTime', width: 180 },
  { title: '审核人', dataIndex: 'reviewer', width: 100 },
  { title: '审核时间', dataIndex: 'reviewTime', width: 180 },
  {
    title: '操作',
    key: 'action',
    fixed: 'right' as const,
    width: 140,
    render: () => (
      <Space>
        <Button type="link" size="small">编辑</Button>
        <Button type="link" size="small">删除</Button>
        <Button type="link" size="small">撤销</Button>
      </Space>
    )
  }
]

const mockData: StockCheckRecord[] = Array.from({ length: 60 }).map((_, i) => ({
  key: i + 1,
  index: i + 1,
  orderNo: `PDDH${(9000 + i).toString().padStart(4, '0')}`,
  result: (['草稿', '有盈亏', '无盈亏'] as StockCheckRecord['result'][])[i % 3],
  warehouse: '货品仓库一',
  type: (['存货盘点', '原料盘点'] as StockCheckRecord['type'][])[i % 2],
  startTime: '2024-02-29',
  endTime: '2024-02-29',
  outStatus: (['未出库', '部分出库', '已出库', '-'] as StockCheckRecord['outStatus'][])[i % 4],
  inStatus: (['未入库', '部分入库', '已入库', '-'] as StockCheckRecord['inStatus'][])[i % 4],
  goods: '三锅头、可笑、何必等8项……',
  qty: 50,
  profitQty: 50,
  lossQty: -50,
  profitAmount: 9999,
  lossAmount: -9999,
  agent: '李依依',
  maker: '潘悦惟',
  department: '仓储部',
  makeTime: '2024-02-29 21:37:33',
  reviewer: '赵子墨',
  reviewTime: '2024-02-29 21:37:33'
}))

export default function Check() {
  const [form] = Form.useForm()

  const handleSearch = () => {
    const values = form.getFieldsValue()
    console.log('search:', values)
  }

  const handleReset = () => {
    form.resetFields()
  }

  return (
    <Space direction="vertical" size={12} style={{ width: '100%' }}>
      

      <Card bordered={false} bodyStyle={{ paddingBottom: 0 }}>
        <Form form={form} layout="inline" onFinish={handleSearch}>
          <Form.Item label="盘点单号" name="orderNo">
            <Input placeholder="请输入" allowClear style={{ width: 200 }} />
          </Form.Item>
          <Form.Item label="盘点结果" name="result">
            <Select
              placeholder="请选择"
              allowClear
              options={[
                { label: '草稿', value: '草稿' },
                { label: '有盈亏', value: '有盈亏' },
                { label: '无盈亏', value: '无盈亏' }
              ]}
              style={{ width: 140 }}
            />
          </Form.Item>
          <Form.Item label="盘点类型" name="type">
            <Select
              placeholder="请选择"
              allowClear
              options={[
                { label: '存货盘点', value: '存货盘点' },
                { label: '原料盘点', value: '原料盘点' }
              ]}
              style={{ width: 140 }}
            />
          </Form.Item>
          <Form.Item label="仓库名称" name="warehouse">
            <Select
              placeholder="请选择"
              allowClear
              options={[
                { label: '货品仓库一', value: '货品仓库一' },
                { label: '原料仓库', value: '原料仓库' }
              ]}
              style={{ width: 160 }}
            />
          </Form.Item>
          <Form.Item label="开始时间" name="start">
            <DatePicker style={{ width: 160 }} />
          </Form.Item>
          <Form.Item label="结束时间" name="end">
            <DatePicker style={{ width: 160 }} />
          </Form.Item>

          <Space style={{ marginLeft: 'auto', marginBottom: 16 }}>
            <Button onClick={handleReset}>重置</Button>
            <Button type="primary" htmlType="submit">查询</Button>
          </Space>
        </Form>
      </Card>

      <Card bordered={false} bodyStyle={{ paddingTop: 12 }}>
        <Space style={{ marginBottom: 12 }} wrap>
          <Button type="primary">新增</Button>
          <Button danger>删除</Button>
          <Button>导出</Button>
          <Button>刷新</Button>
          <Button>作废</Button>
          <Button>锁定仓库</Button>
        </Space>

        <Table
          rowSelection={{}}
          columns={columns as any}
          dataSource={mockData}
          bordered
          size="middle"
          pagination={{
            pageSize: 10,
            showQuickJumper: true,
            showSizeChanger: true,
            pageSizeOptions: [10, 20, 50],
            showTotal: (t) => `共 ${t} 条`
          }}
          scroll={{ x: 2100 }}
        />
      </Card>
    </Space>
  )
}
